<template>
  <panel title="给排水异常监控">
    <div class="ml20 mr20 failure-statistic" v-if="show">
      <div class="total" v-animated-number="warnAccount.length || 0"></div>
      <pie :width="chartWidth" :height="chartHeight" :options="chartOptions"></pie>
    </div>
  </panel>
</template>

<script>
import DEVICE_TYPES from 'config/device-types'
import _ from 'lodash'

export default {
  name: 'WaterWatch',

  data () {
    return {
      chartWidth: '200px',
      chartHeight: '200px',
      show: false,
      color: '#c23531'
    }
  },

  computed: {
    waterDevices () {
      return this.$store.getters.tubes
    },
    warnAccount () {
      if (this.waterDevices.length) {
        return _.filter(this.waterDevices, (item) => {
          return item.type === DEVICE_TYPES.TUBE_PRESSURE && item.isWarnning
        })
      }
      return []
    },
    chartData () {
      let series = _.groupBy(this.warnAccount, 'room')
      let res = []
      for (let i in series) {
        res.push({
          name: i,
          value: series[i].length
        })
      }
      if (!res || !res.length) {
        this.color = '#61a0a8'
        return [{
          name: '无故障信息',
          value: 0
        }]
      }
      this.color = '#c23531'
      return res
    },
    chartOptions () {
      return {
        title: {
          text: '当前故障数',
          x: 'center',
          bottom: 10,
          textStyle: {
            color: '#999',
            fontSize: 12,
            fontWeight: 'normal'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c}',
          position: ['17%', '52%']
        },
        series: [{
          radius: ['40%', '60%'],
          center: ['50%', '45%'],
          data: this.chartData,
          label: {
            normal: {
              show: true,
              formatter: (value) => {
                const arr = []
                arr.push(value.name.substring(0, 7))
                arr.push(value.name.substring(7))
                return arr.join('\n')
              }
            }
          }
        }],
        color: [this.color]
      }
    }
  },

  mounted () {
    setTimeout(this.initialize, 400)
  },

  methods: {
    initialize () {
      this.chartWidth = `${this.$el.clientWidth - 40}px`
      this.chartHeight = `${this.$el.clientHeight - 31}px`
      this.show = true
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../../../assets/stylus/common'

.failure-statistic {
  position: relative;

  .total {
    absolute: left top 45%;
    margin-top: -20px;
    size: 100% 40px;
    font-size: 30px;
    line-height: 40px;
    text-align: center;
  }
}
</style>
